<script setup lang="ts">
import type { CharacterTable } from '@/types/symmetry'
import { convertPi, formatCharacter, formatMulliken, formatSchoenflies, formatSeitz } from '@/utils/formatters'
import { renderInline } from '@/utils/katex'
import { InformationCircleIcon } from '@heroicons/vue/24/solid'
import { computed } from 'vue'

interface Props {
  schoenflies: string
  characterTable: CharacterTable
}

const { schoenflies, characterTable } = defineProps<Props>()

const formattedNote = computed(() => convertPi(characterTable.note?.replace(/exp\(([^)]+)\)/g, (_, content) => `e^{${content}}`) ?? ''))
</script>

<template>
  <div class="space-y-2">
    <!-- 特征标表 -->
    <table class="table-zebra table [&_td]:text-center [&_th]:text-center">
      <thead>
        <tr>
          <th v-html="renderInline(formatSchoenflies(schoenflies))"></th>
          <th v-for="irrep in characterTable.irreps" :key="irrep.mulliken" v-html="renderInline(formatMulliken(irrep.mulliken))"></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(op, index) in characterTable.operations" :key="op">
          <td v-html="renderInline(formatSeitz(op))"></td>
          <td v-for="irrep in characterTable.irreps" :key="irrep.mulliken" v-html="renderInline(formatCharacter(irrep.characters[index] ?? ''))"></td>
        </tr>
      </tbody>
    </table>

    <!-- 特征标表说明 -->
    <div v-if="characterTable.note" class="alert" role="alert">
      <InformationCircleIcon class="text-info size-5 shrink-0" />
      <span v-html="renderInline(formattedNote)"></span>
    </div>
  </div>
</template>
